<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col">
				<view class="flex-col items-center section_1">
					<view>
						<text class="text_1">￥</text>
						<text class="text_2">{{orderid}}</text>
					</view>
					<view class="flex-row " style=" font-size: 26rpx; color: #9C9C9C; padding-top: 25rpx;">
						支付剩余时间：
						<!-- 倒计时 -->
						<view style=" margin-top: -6rpx; ">
							<u-count-down :time="12 * 60 * 1000" format="mm:ss:SSS" autoStart millisecond>
							</u-count-down>
						</view>

					</view>
				</view>
				<view class="flex-col section_2">
					<view class="flex-col">
						<text class="text_3">选择支付方式</text>
						<view class="flex-row group_4 u-row-between" @click="setIndex(0)">
							<view class="u-flex">
								<image :src="imgUrl+'16557826853728368203.png'" class="image_1" />
								<text class="text_4">微信支付</text>
							</view>

							<image :src="$IMG_URL+(index!=0?'/icons/radio.png':'/icons/radiocheck.png')"
								class="image_4" />
						</view>
					</view>
					<view class="justify-between group_5" @click="setIndex(1)">
						<view class="flex-row u-row-between w-full">
							<view class="u-flex">
								<image :src="imgUrl+'16557826855118912327.png'" class="image_1 image_3" />
								<text class="text_5">支付宝支付</text>
							</view>
							<image :src="$IMG_URL+(index!=1?'/icons/radio.png':'/icons/radiocheck.png')"
								class="image_4" />
						</view>

					</view>
				</view>
			</view>
			<view class="flex-col items-center button"><text class="text_6" @click="topay()">立即支付</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		onLoad(option) {
			if (option.hasOwnProperty('orderid')) {
				this.orderid = option.orderid;
				// this.getOrder(this.orderid);
			} else {
				this.$u.toast('参数异常');
			}
			this.getStrategy();
		},
		data() {
			return {
				imgUrl: this.$IMG_URL,
				//倒计时
				time: '',
				order: {},
				index: 0,
				orderid: ''
			};
		},
		onUnload: function() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			//获取订单 下单情况
			getStrategy(orderid) {
				this.$http('decorationStrategy.generateStrategy', {
					ordersId: orderid
				}).then(r => {
					if (r.code == 200) {
						console.log(r.code);

					} else {
						this.$u.toast(r.msg);
					}
				})
			},
			getOrder(orderid) {
				this.$http('lorder.getPrice', {
					ordersId: orderid
				}).then(r => {
					if (r.code == 200) {
						this.order = r.data;
						if (this.order.ordersStatus != 1) {
							// this.go('/pages/my/order/order');
						}
					} else {
						this.$u.toast(r.msg);
					}
				})
			},
			topay() {

				// this.$http('oteherL.updateOrdersStatus',{
				// 	ordersId:this.orderid,
				// 	ordersStatus:'2'
				// }).then(res=>{
				// 	if(res.code==200){
				// 		console.log(res.data);

				uni.navigateTo({
					url: '/pages/my/order/order'
				})

				// 	}else{

				// 	}
				// })
			},
			setIndex(index) {
				this.index = index;
			}
		},
	};
</script>

<style scoped lang="scss">
	.image_1 {
		width: 56rpx;
		height: 56rpx;
	}

	.page {
		background-color: #f6f7f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 94vh;
	}

	.group {
		padding-bottom: 64rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.button {
		margin: 423rpx 32rpx 0;
		width: 686rpx;
		height: 88rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.section_1 {
		padding: 74rpx 0 133rpx;
		background-color: #ffffffff;
	}

	.section_2 {
		margin-top: 20rpx;
		padding: 30rpx 32rpx 32rpx;
		background-color: #ffffffff;
	}

	.text_6 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_5 {
		margin-top: 66rpx;
	}

	.text_1 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_2 {
		color: #fe641a;
		font-size: 48rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 56rpx;
	}

	.text_3 {
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_4 {
		margin-top: 39rpx;
		padding-top: 34rpx;
		border-top: solid 2rpx #eeeeee;
	}

	.image_4 {
		align-self: center;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
	}

	.text_4 {
		margin-left: 24rpx;
		margin-top: 3rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_3 {
		flex-shrink: 0;
	}

	.text_5 {
		margin-left: 24rpx;
		margin-top: 3rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
